#{extends 'tags/layouts/main.html' /}
#{set title:'Friend List' /}
<div class="input-group">
    <input placeholder="Input Your Friend's Mobile Number" type="text" class="form-control"/>
    <span class="input-group-addon">
        <button onclick ="searchFriend();"><i  class="fa fa-search"></i></button>
    </span>
</div>
<div id = "show-search-friend">
</div>
<ul id = "ini" class="registered-users-list clearfix">
    #{list items:friend.friends, as:'usr'}
    <li>
        <a href="@{Profile.index(usr.user_id)}"><img src="${usr.photo}" alt=""></a>
        <h4 class="username text-ellipsis">
            ${usr.firstname} ${usr.lastname}
            <small>${usr.region}</small>
        </h4>
    </li>
    #{/list}
</ul>
<script type="text/javascript">
	function searchFriend(){
		var html = "";
		$('#show-search-friend').html('');
		var num = $('.form-control').val();
		//alert(num);
		$.ajax({
			type: "POST",
			url: '/profile/search_friend',
			data :{
				number: num
			},
			success: function(data) {
				$('#ini').hide();
				//alert(data.friends[1].firstname);
					
					if (data.friends.length ==0){
						alert ("No result");
					}
					else {
						for (var i=0 ; i < data.friends.length;i++){
							var firstname = data.friends[i].firstname ;
							var lastname = data.friends[i].lastname ;
							var user_id = data.friends[i].user_id ;
							html += '<ul class="registered-users-list clearfix">';
							html += '<li>';
							html += '<a';
							//html += user_id;
							html += '"><img src="'+data.friends[i].photo+'" alt=""></a>';
							html += '<button id="add-button" onclick ="addFriend('+user_id+');"><i  class="glyphicon glyphicon-plus"></i></button>' 
							html += '<h4 class="username text-ellipsis">' + firstname + lastname;
							html += ' <small>'+data.friends[i].region+'</small>';
							html +=			'</h4>';
							html +=			'</li>';
							html +='</ul>';
						}
					}														
					$('#show-search-friend').append(html); 	
			}
			});
		
	}
	function addFriend(user_id){		
		$.ajax({
			type: "POST",
			url: '/profile/addfriend',
			data :{
				user_id: user_id
			},
			success: function(data) {
				$('#add-button').hide();
				alert("Sent Request");
			}
			});
	}
</script>
